<template>
  <div
    class="map-legend-item"
    @click="$emit('click', item)"
  >
    <img
      v-if="item.type === 'point' || item.type === 'icon'"
      :src="item.url"
    >
    <span
      v-else-if="item.type === 'rect'"
      class="icon-rect"
      :style="{ backgroundColor: item.color }"
    />
    <span
      v-else-if="item.type === 'line'"
      class="icon-line"
      :style="{ backgroundColor: item.color }"
    />
    <span :class="['legend-item-text', visibleLayerMap[item.layerId] ? 'c-white' : 'c-grey']">{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'LegendItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    visibleLayerMap: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.map-legend-item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  cursor: pointer;

  img {
    margin-right: 6px;
  }

  .icon-rect,
  .icon-line {
    display: inline-block;
    width: 16px;
    margin-left: 4px;
    margin-right: 10px;
  }

  .icon-rect {
    height: 6px;
  }

  .icon-line {
    height: 2px;
  }

  .legend-item-text {
    font-size: 14px;
    white-space: nowrap;
    &.c-white { color: #424e61; }
  }
}
</style>
